<template>
  <div
    class="source-card bg-#fff p-15px b-rd-5px font-size-12px cursor-pointer"
    @click="$emit('click')"
  >
    <div class="flex items-center justify-between font-size-14px">
      <span class="link">{{ props.data.elementTitle }}</span>
      <span class="right">{{ props.data.supplyNodeName }}</span>
    </div>
    <div class="min-h-20px flex flex-wrap mt-12px">
      <span
        v-for="tag in props.data.elementTagList"
        :key="tag"
        class="tag tag-bg-color b-rd-2px px-6px py-2px mr-4px"
        >{{ tag }}</span
      >
    </div>

    <div class="mt-12px flex items-center justify-between">
      <div class="flex items-center">
        <img
          :src="userAvatar(props.data.createUser.avatar) || '/svg/avatar.svg'"
          alt=""
          class="w-24px h-24px b-rd-50% mr-4px"
        />
        <span class="text-light">{{ props.data.createTime.slice(0, 10) }}</span>

        <div class="inline-flex items-center ml-8px">
          <el-icon class="font-size-14px text-light"><Download /></el-icon>
          <span class="ml-2px">{{ props.data.downloadTimes || 0 }}</span>
        </div>
      </div>
      <span class="text-light">{{ props.data.elementFrame }}</span>
    </div>
    <div class="footer" v-if="isCreator">
      <el-button
        v-if="[1, 0].includes(props.data.status)"
        :type="props.data.status === 0 ? 'primary' : ''"
        @click.stop="toggleStatus"
        >{{ props.data.status === 1 ? "下架" : "上架" }}</el-button
      >
      <el-button type="primary" size="mini" @click.stop="$emit('edit')"
        >编辑</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { Download } from "@element-plus/icons-vue";
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  isCreator: Boolean,
});

const userAvatar = computed(() => {
  return (url) => {
    return url ? `${import.meta.env.VITE_BASE_URL}${url}` : "/svg/avatar.svg";
  };
});

const $api = inject("$api");
const toggleStatus = async () => {
  const { id, status } = props.data;
  const { code } = await $api.provide.toggleStatus({
    id,
    status: Number(!status),
  });
  if (code === 200) {
    ElMessage.success(status ? "下架成功" : "上架成功");
    props.data.status = Number(!status);
  }
};
</script>

<style scoped lang="less">
.source-card {
  box-sizing: border-box;
  width: calc(50% - 12px);
  border: 1px solid #e8e8e8;
  box-shadow: 0 4px 4px 0 rgba(232, 232, 232, 0.6);
  margin-bottom: 24px;
  .footer {
    border-top: 1px solid @border-color;
    margin-top: 12px;
    padding-top: 12px;
    text-align: right;
  }
  &:hover {
    box-shadow: 0px 6px 10px 0px rgba(3, 39, 129, 0.2);
  }
}
</style>
